<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>bootstrap组件-作业（11.30）</title>
    <style>
        #box{
            margin: 10px;
            width: 1000px;
            height: 100%;
            /* border: 1px solid black; */
            display: flex;
        }
        #left{
            width:33%;
            height: 100%;
            /* border: 1px solid yellowgreen; */
        }
        #right{
            width:67%;
            height: 1000px;
            /* border: 1px solid red; */
        }
        #xm{
            width:100%;
            height: 300px;
            /* border: 1px solid palegreen; */
        }
        #top_xm{
            width:100%;
            height: 50px;
            line-height: 50px;
            /* border: 1px solid pink; */
            border-radius: 10px;
            /* background-color:rgb(56, 137, 149); */
        }
        #bottom_xm{
            width: 100%;
            height:250px;
            /* border: 1px solid red; */
            display: flex;
        }
        #bottom_xm_left{
            width: 30%;
            height: 240px;
            /* border: 1px solid rgb(0, 0, 0); */
            margin: 10px;
        }
        #bottom_xm_center{
            width: 30%;
            height: 240px;
            /* border: 1px solid rgb(0, 0, 0); */
            margin: 10px;
        }#bottom_xm_right{
            width: 30%;
            height: 240px;
            /* border: 1px solid rgb(0, 0, 0); */
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="box">
            <div id="left">
                <div class="card" style="width: 20rem;">
                    <div class="card-header">
                    个人信息
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <img src="img/img1.jpg" class="card-img-top " alt="...">
                            <h4 class="card-title text-center">小向同学</h4>
                        </li>
                        <li class="list-group-item">
                            <div class="card-body">
                                <!-- 房屋 -->
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
                                <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                            </svg>广元市利州区学府路265号
                            <br>
                            <!-- 邮政编码 -->
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-earmark-post" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/>
                                <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3zM4 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-7z"/>
                                <path fill-rule="evenodd" d="M4 3.5a.5.5 0 0 1 .5-.5H7a.5.5 0 0 1 0 1H4.5a.5.5 0 0 1-.5-.5z"/>
                            </svg>邮政编码680560
                            <br>
                            <!-- 手机 -->
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-phone" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
                                <path fill-rule="evenodd" d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                            </svg>联系电话：13419171453
                            <br>
                            <!-- 邮箱 -->
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
                            </svg><a href="#">sony1224@163.com</a>
                                <!-- <h5 class="card-title">Special title treatment</h5>
                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a> -->
                            </div>
                        </li>
                        <!-- <li class="list-group-item">Vestibulum at eros</li> -->
                    </ul>
                </div>
        
                <div class="card" style="width: 20rem; margin-top: 20px;" >
                    <div class="card-header text-center bg-info" >
                        个人技能
                    </div>
                    <!-- <ul class="list-group list-group-horizontal">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                    </ul> -->
        
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <div class="progress">
                                <!-- progress-bar-striped条纹 -->
                                <!-- progress-bar-animated带动画的进度条 -->
                                <!-- <span class="">HTML5:</span> -->
                                <!-- <div class="row"> -->
                                    <!-- <div class="col-6">HTML5</div> -->
                                    <!-- <div class="col-6">
                                        <div class="progress-bar bg-success progress-bar-striped progress-bar-animated "  style="width:50%">50%</div>

                                    </div> -->


                                    <div class="progress-bar bg-success progress-bar-striped progress-bar-animated"  style="width:50%">50%</div>


                                <!-- </div> -->
                                
                                
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="progress">
                                <!-- CSS: -->
                                <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated"  style="width:70%">70%</div>
                            </div>
                            
                        </li>
                        <li class="list-group-item">
                            
                            <div class="progress">
                                <!-- JQuery: -->
                                <div class="progress-bar bg-dark progress-bar-striped progress-bar-animated"  style="width:60%">60%</div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="progress">
                                <!-- JS: -->
                                <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated"  style="width:90%">90%</div>
                            </div>
                            
                        </li>
                    </ul>
                </div>
        
                <div class="card" style="width: 20rem;margin-top: 20px;">
                    <div class="card-header text-center bg-info" >
                        个人技能
                    </div>
                    <div class="card-body">
                        <form >
                            <div class="row" style="margin: 6px;">
                                <label for="username" class="col-md-4 text-center" >邮箱</label>
                                <div class="col-md-8">
                                    <input type="text" id="username" class="form-control" placeholder="请输入账号："></input>
                                </div>
                            </div>
                            <div class="row" style="margin: 6px;">
                                <label for="pass" class="col-md-4 text-center" >姓名</label>
                                <div class="col-md-8">
                                    <input type="password" id="pass" class="form-control" placeholder="请输入密码："></input>
                                </div>
                            </div>
                            <a href="#" class="btn btn-primary active btn-xm" data-toggle="tooltip">发送</a>
                        </form>
                        
                    </div>
                </div>

            </div>
            <div id="right">
                <div class="jumbotron">
                    <!-- <h1 class="display-1">Hello, world!</h1> -->
                    <!-- <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> -->
                    <hr class="my-1">
                    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                    <a class="btn btn-primary btn-xg active text-center" href="#" role="button">Learn more</a>
                </div>

                <div id="xm">
                    <div id="top_xm">项目展示</div>
                    <div id="bottom_xm">
                        <div id="bottom_xm_left">
                            <div class="card" style="width: 12rem;">
                                <!-- <img src="img/img2.jpg" class="card-img-top" alt="..."> -->
                                <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                                        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <img src="img/img1.jpg" class="d-block w-100" alt="...">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="img/img2.jpg" class="d-block w-100" alt="...">
                                        </div>
                                        <div class="carousel-item">
                                            <img src="img/img1.jpg" class="d-block w-100" alt="...">
                                        </div>
                                    </div>
                                    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        
                                    </a>
                                    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        
                                    </a>
                                </div>
                                <ul class="nav nav-tabs nav-pills nav-stacked text-center">
                                    <li class="nav-item">
                                        <a class="nav-link active " href="#">Active</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#">disabled</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="bottom_xm_center">
                            <div class="card" style="width: 12rem;">
                                <img src="img/img2.jpg" class="card-img-top" alt="...">
                                <ul class="nav nav-tabs nav-pills nav-stacked">
                                    <!-- <li class="nav-item">
                                        <a class="nav-link active" href="#">Active</a>
                                    </li> -->
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Separated link</a>
                                        </div>
                                    </li>
                                    
                                </ul>
                            </div>
                        </div>
                        <div id="bottom_xm_right">
                            <div class="card" style="width: 12rem;">
                                <img src="img/img2.jpg" class="card-img-top" alt="...">
                                <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                    <div class="btn-group mr-2" role="group" aria-label="First group">
                                        <button type="button" class="btn btn-secondary">1</button>
                                        <button type="button" class="btn btn-secondary">2</button>
                                        <button type="button" class="btn btn-secondary">3</button>
                                        <button type="button" class="btn btn-secondary">4</button>
                                        <button type="button" class="btn btn-secondary">5</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="xm">
                    <div id="top_xm" style="margin-top: 10px;">工作经验</div>
                    <div id="bottom_xm">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Sex</th>
                                    <th scope="col">Age</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">001</th>
                                    <td>小向</td>
                                    <td>男</td>
                                    <td>20</td>
                                </tr>
                                <tr>
                                    <th scope="row">002</th>
                                    <td>小艾</td>
                                    <td>男</td>
                                    <td>20</td>
                                </tr>
                                <tr>
                                    <th scope="row">003</th>
                                    <!-- <td colspan="2">Larry the Bird</td> -->
                                    <td>小艾</td>
                                    <td>男</td>
                                    <td>19</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>


                <div id="xm" style="margin-top: -50px;">
                    <!-- style="margin-top: 10px;" -->
                    <div id="top_xm" >教育背景</div>
                    <div id="bottom_xm" >
                        <table class="table table-hover table-dark ">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">时间</th>
                                    <th scope="col">学校</th>
                                    <th scope="col">专业</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">001</th>
                                    <td>1999-2003</td>
                                    <td>湖北大学</td>
                                    <td>计算机专业本科</td>
                                </tr>
                                <tr>
                                    <th scope="row">002</th>
                                    <td>2003-2006</td>
                                    <td>华中科技大学</td>
                                    <td>计算机专业硕士</td>
                                </tr>
                                <tr>
                                    <th scope="row">003</th>
                                    <td>2008-2009</td>
                                    <td>xxx公司</td>
                                    <td>技术培训</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        



        

    </div>




</body>
</html>